<template>
  <div class="w-full h-full flex flex-col justify-between overflow-hidden">
    <div v-if="inputShow">
      <slot name="input">
        <el-input v-model="inputText" v-bind="inputProops" v-on="inputEvents" class="mb-[5px]" />
      </slot>
    </div>
    <div ref="treeBox" class="flex-1 relative">
      <el-tree-v2 ref="treeRef" v-bind="treeProops" v-on="treeEvents" :height="treeBoxHeight">
        <template #default="{ node }">
          <slot name="tree" :node="node">
            <span>{{ node.label }}</span>
          </slot>
        </template>
      </el-tree-v2>
    </div>
    <div v-if="pageShow">
      <slot name="page">
        <div class="tree-page">
          <el-pagination v-model:current-page="currentPages" v-model:page-size="pageSizes" v-bind="pageProops"
            v-on="pageEvents" />
        </div>
      </slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps({
  /** 输入框参数 */
  inputProops: Object,
  /** 输入框事件 */
  inputEvents: Object,
  /** 输入框值 */
  inputModel: String,
  /** 树参数 */
  treeProops: Object,
  /** 树事件 */
  treeEvents: Object,
  /** 分页页码 */
  currentPage: Number,
  /** 分页大小 */
  pageSize: Number,
  /** 分页参数 */
  pageProops: Object,
  /** 分页事件 */
  pageEvents: Object,
  /** 树高度变化步长（盒子高度变化值大于该值才会对树高度进行重新赋值，防止树样式修改将外层盒子撑大后造成的无限循环变长） */
  treeHeightChangeStep: {
    type: Number,
    default: 1
  },
  inputShow: {
    type: Boolean,
    default: true
  },
  pageShow: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits([
  "update:inputModel",
  "update:currentPage",
  "update:pageSize"
]);
const treeRef = ref();
const inputText = ref(props.inputModel);
watch(
  () => inputText.value,
  () => {
    emits("update:inputModel", inputText.value);
  }
);
const currentPages = ref(props.currentPage);
watch(
  () => currentPages.value,
  () => {
    emits("update:currentPage", currentPages.value);
  }
);
const pageSizes = ref(props.pageSize);
watch(
  () => pageSizes.value,
  () => {
    emits("update:pageSize", pageSizes.value);
  }
);
const treeBox = ref();
const treeBoxHeight = ref(0);
const resizeObserver = new ResizeObserver(entries => {
  // 处理大小变化的回调函数
  for (const entry of entries) {
    if (
      entry.contentRect.height - treeBoxHeight.value >
      props.treeHeightChangeStep
    ) {
      treeBoxHeight.value = entry.contentRect.height;
    }
    // 在这里执行你想要的操作，比如更新数据或触发其他事件
  }
});
onMounted(() => {
  resizeObserver.observe(treeBox.value);
  props.treeProops["item-size"] = 42;
});

onUnmounted(() => {
  resizeObserver.disconnect();
});
function getTreeRef() {
  return treeRef.value;
}
defineExpose({
  getTreeRef
});
</script>
<style lang="scss" scoped>
::v-deep(.el-tree-node__content) {
  span {
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
